<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src=""></script>
  <style>
    *{
      user-select: none;
    }
    #box{
      /* width: 1300px; */
      width: 100%;
      /* height: 550px; */
      float: right;
    }
    a{
      text-decoration: none;
    }
    .daohangtiao{
      /* border: 1px rgb(0, 0, 0) solid; */
      display: flex;
      border-bottom: solid 1px rgb(95, 95, 95);
      justify-content: space-between;
    }
    .dao_1{
      display: flex;
    }
    
    .dao_2{
      width: 80px;
      height: 25px;
      border: 1px blue solid;
      border-radius: 5px;
      justify-content: space-around;
      margin-right: 25px;
      text-align: center;  /*水平居中*/
      line-height: 25px; /*垂直居中 值为heigth的值*/
    }
    .dao_2:hover{
      cursor: pointer;
      /* background-color: rgb(211, 130, 243); */
      background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
      border: 1px rgb(255, 255, 255) solid;
    }
    .dao_3{
      width: 25px;
      height: 25px;
      margin-right: 10px;
      /* border:red 1px solid; */
      transition: transform 0.5s ease; /* 动画效果 */ 
    }
    .dao_3>img{
      width: 100%;
      height: 100%;
    }
    .dao_3:hover{
      transform: rotate(180deg); /* 鼠标悬浮时旋转180度 */  
    }


    .middle{
      width: 70%;
      height: 99%;
      /* border: 1px rgb(166, 182, 19) solid; */
      background-color: rgba(0, 0, 0, 0.082);
      /* background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%); */
      padding-top: 10px;
    }

    .middle_box{
      width: 99.99%;
      height: 100%;
      /* border: 1px rgb(255, 0, 0) solid; */
      /* background-color: rgb(243, 243, 243); */
      display: flex;
      flex-wrap: wrap; /* 允许盒子换行 */
      justify-content: flex-start; /* 左对齐，从左往右排列 */  
      overflow-y: auto; /* 设置垂直方向可滚动 */  
    }
    .middle_box::-webkit-scrollbar {  /*清除滚动条*/
      display: none;
    }

    .middle-div {  
      height: 190px;
      /* border: 1px rgb(14, 17, 150) solid; */
      width: 33.33%; /* 每行显示三个盒子，设置为 1/3 宽度 */
      box-sizing: border-box; /* 盒子宽度包括 padding 和 border */
      padding-left: 20px; /* 设置盒子内边距 */
      margin-top: 20px;
      display: flex;  
      /*justify-content: center;*/ /* 水平居中 */  
      align-items: center; /* 垂直居中 */  
    }
    
    .middle-div_left{
      width: 110px;
      height: 140px;
      /* border: 1px rgb(160, 0, 0) solid; */
      border-radius: 10px;
      box-shadow: 8px 8px 8px -3px rgba(133, 133, 133, 0.8);
    }
    .middle-div_left:hover{
      width: 120px;
      height: 150px;
      cursor: pointer;
    }
    .middle-div_left_money{
      width: 60px;
      height: 33px;
      border: 1px rgb(0, 0, 0) solid;
      border-radius: 8px;
    }
    .middle-div_left_money:hover{
      transition: all 0.5s; /*慢慢显示*/
      border: rgb(139, 197, 81) 1.3px solid;
      width: 55px;
      height: 28px;
    }

    .middle-div_left > img{
      width: 100%;
      height: 100%;
      border-radius: 10px;
    }
    .middle-div_right{
      width: 180px;
      height: 140px;
      /* border: 1px rgb(160, 0, 0) solid; */
      margin-left: 20px;
      margin-top: 3px;
    }
    .middle-div_right > a{
      font-size: 17px;
      color: black;
    }
    .p2{
      color: rgb(255, 102, 0);
    }
    .p3{
      color: rgb(61, 61, 61);
      font-size: 11px;
      margin-left: 4px;
    }


    .bottom{
      width: 30%;
      height: 100%;
      /* border-top: rgb(46, 46, 46) 1.5px dashed; */
      border-bottom: rgb(163, 163, 163) 1.5px solid;
      background-color: rgb(255, 255, 255);
      /* display: flex; */
    }
    .bottom_left{
      width: 100%;
      height: 80%;
      /* border: 1px rgb(30, 216, 207) solid; */
      border-bottom: solid 1px black;
      border-right: rgba(0, 0, 0, 0.171) 1.5px solid;
    }
    .bottom_left>h3{
      margin-left: 10px;
    }
    .bottom_right{
      width: 100%;
      height: 20%;
      /* border: 1px rgb(108, 76, 180) solid; */
      text-align: center;  /*水平居中*/
      line-height: 18px; /*垂直居中 值为heigth的值*/
      color: rgb(255, 123, 0);
      color: rgb(255, 175, 27);
    }
    .bottom_right > p{
      /* margin-top: 80px; */
      font-size: 22px;
    }
    .bottom_right > button{
      margin-top: 20px;
      width: 60px;
      height: 30px;
      border-radius: 8px;
      border: 0.5px solid;
    }
    .bottom_right > button:hover{
      cursor: pointer;
      transition: all 0.5s;
      background-color: rgb(255, 187, 84);
      color: rgb(255, 255, 255);
      border: 1px solid rgb(255, 187, 84);
    }

    #order-details{
      height: 92%;
      /* border:1px rgb(34, 199, 48) solid; */
      overflow-y: auto; /* 设置垂直方向可滚动 */ 
    }

    .bot_name{
      overflow: hidden;
      white-space: nowrap;
      text-overflow:ellipsis;
      width: 130px;
      /* border: solid 1px red; */
    }

    .bot_name:hover{
      content: attr(title);
    }

    .total-price{
      width: 100px;
      /* border: solid 1px red; */
    }
    /* #order-details::-webkit-scrollbar {  //清除滚动条
      display: none;
    } */

    .order-item{
      width: 94%;
      height: 55px;
      margin-left: 20px;
      margin-bottom: 10px;
      /* border:1px red solid; */
      display: flex;
      justify-content: space-between;
      line-height: 55px;
    }
    .order-item>img{
      width: 9%;
      height: 100%;
      /* border:1px red solid; */
      border-radius: 10px;
    }
    .remove{
      width: 60px;
      height: 25px;
      border-radius: 5px;
      line-height: 20px;
      margin-top: 15px;
    }
    #tanchuang {
    display: none;
    position: fixed;
    top: 38%;
    left: -5%;
    transform: translate(130%, -50%);
    width: 500px;
    height: 450px;
    background-color: #ffffff;
    padding: 20px;
    border: 2px solid rgb(236, 204, 248);
    overflow: auto;
    padding: 25px; 
    border-radius: 5px;
    z-index: 1000; /* 使弹窗位于遮罩层之上 */
    }


    #tanchuangneirong>p{
            color: rgba(128, 128, 128, 0.603);
            font-weight: bolder;
            margin: 0 auto;
    }
    .box2{
            /* margin-top: -15px; */
            background-color: white;
            width: 100%;
            padding:10px 0px;
          text-align: center;
          font-weight: bolder;
    }
    .tj{
            margin-top: 80px;
            margin-left: 207px;
            background-color: #ADEEFF; 
            width: 80px; 
            height: 30px; 
            text-align: center;
            /* padding-top: 8px; */
            border-radius: 10%;
            font-size: 13px;
            display:block;
            border: none;
            
    }
    .bot_span{
            display: inline-block;  
            width: 40px;   
            text-align-last: justify;
    }
    .dad{
            margin: 0 auto;
            display: flex !important;
            /* border: 1px black  solid; */
            width: 400px;
            height: 150px;
            
            flex-wrap: wrap;
    }
    .dad>div{
            width: 50%;
    }
    .dad>div>p{
           font-size: 13px;
           margin-bottom: 0 auto;
           margin-left: -118px;
    }
    .dad>div>input{
            height: 25px;
            width: 167px;
            border: none;
            background-color: #F1F1F1;
            font-size: 13px;
            border-radius: 5px;
    }

    /* 遮罩层样式 */
    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(138, 138, 138, 0.5); /* 半透明黑色背景 */
        z-index: 999; /* 使遮罩层位于最上层 */
        display: none; /* 默认隐藏 */
    }


    .box_top{
      height: 734px;
      width: 100%;
      /* border: 1px red solid; */
      display: flex;
      justify-content: space-between;
    }
  </style>
</head>
<body>
  <div id="box">

    <div class="daohangtiao">
      <div class="dao_1">
        <div class="dao_2" data-target="middle_box_1">零 食</div>
        <div class="dao_2" data-target="middle_box_2">饮 料</div>
        <div class="dao_2" data-target="middle_box_3">用 品</div>
      </div>
      

      <div class="dao_3">
        <img src="./imgs/添加.png" alt="">
      </div>
    </div>


    <div class="box_top">
      <div class="middle">

      <div class="middle_box" id="middle_box_1" >
        <div class="middle-div">
          <div class="middle-div_left" data-name="泡椒鸡爪" data-price="9.99" data-image="/shopManage/img/jizhua.jpg"><img src="/shopManage/img/jizhua.jpg" alt=""></div>
          <div class="middle-div_right">
            <a href="">泡椒鸡爪</a>
            <p class="p2">￥ 12.5</p
            <p class="p3">库存：20</p>
            <button class="middle-div_left_money" data-name="泡椒鸡爪" data-price="12.5" data-image="/shopManage/img/jizhua.jpg">购 买</button>
          </div>
        </div>
        <div class="middle-div">
          <div class="middle-div_left"><img src="/shopManage/img/yabo.jpg" alt=""></div>
        <div class="middle-div_right">
          <a href="">绝味鸭脖</a>
          <p class="p2">￥ 5.5</p>
          <p class="p3">库存：20</p>
          <button class="middle-div_left_money" data-name="绝味鸭脖" data-price="5.5" data-image="/shopManage/img/yabo.jpg">购 买</button>
        </div>
        </div>
        <div class="middle-div">
          <div class="middle-div_left"><img src="/shopManage/img/niujiaocui.jpg" alt=""></div>
          <div class="middle-div_right">
            <a href="">牛角脆</a>
            <p class="p2">￥ 7.5</p>
            <p class="p3">库存：20</p>
            <button class="middle-div_left_money" data-name="牛角脆" data-price="7.5" data-image="/shopManage/img/niujiaocui.jpg">购 买</button>
          </div>
        </div>
        <div class="middle-div">
          <div class="middle-div_left"><img src="/shopManage/img/mian.jpg" alt=""></div>
            <div class="middle-div_right">
              <a href="">统一老坛酸菜牛肉面</a>
              <p class="p2">￥ 5.5</p>
              <p class="p3">库存：20</p>
              <button class="middle-div_left_money" data-name="统一老坛酸菜牛肉面" data-price="5.5" data-image="/shopManage/img/mian.jpg">购 买</button>
            </div>
        </div>
        <div class="middle-div">
          <div class="middle-div_left"><img src="/shopManage/img/mian2.jpg" alt=""></div>
          <div class="middle-div_right">
            <a href="">泡椒牛肉面</a>
            <p class="p2">￥ 5.5</p>
            <p class="p3">库存：20</p>
            <button class="middle-div_left_money" data-name="泡椒牛肉面" data-price="5.5" data-image="/shopManage/img/mian2.jpg">购 买</button>
          </div>
        </div>
        <div class="middle-div">
          <div class="middle-div_left"><img src="/shopManage/img/maiqiaoke.jpg" alt=""></div>
            <div class="middle-div_right">
              <a href="">麦巧客</a>
              <p class="p2">￥ 9.5</p>
              <p class="p3">库存：20</p>
              <button class="middle-div_left_money" data-name="麦巧客" data-price="9.5" data-image="/shopManage/img/maiqiaoke.jpg">购 买</button>
            </div>
        </div>
        <div class="middle-div">
          <div class="middle-div_left"><img src="/shopManage/img/guoba.jpg" alt=""></div>
              <div class="middle-div_right">
                <a href="">香米锅巴</a>
                <p class="p2">￥ 5.5</p>
                <p class="p3">库存：20</p>
                <button class="middle-div_left_money" data-name="香米锅巴" data-price="5.5" data-image="/shopManage/img/guoba.jpg">购 买</button>
              </div>
        </div>
        <div class="middle-div">
          <div class="middle-div_left"><img src="/shopManage/img/caomei.jpg" alt=""></div>
            <div class="middle-div_right">
              <a href="">草莓干</a>
              <p class="p2">￥ 4.5</p>
              <p class="p3">库存：20</p>
              <button class="middle-div_left_money" data-name="草莓干" data-price="4.5" data-image="/shopManage/img/caomei.jpg">购 买</button>
            </div>
        </div>
        <div class="middle-div">
          <div class="middle-div_left"><img src="/shopManage/img/niujiaocui.jpg" alt=""></div>
              <div class="middle-div_right">
                <a href="">牛角脆</a>
                <p class="p2">￥ 7.5</p>
                <p class="p3">库存：20</p>
                <button class="middle-div_left_money" data-name="牛角脆" data-price="7.5" data-image="/shopManage/img/niujiaocui.jpg">购 买</button>
              </div>
        </div>
      </div>

      <div class="middle_box" id="middle_box_2" style="display: none;">
        <div class="middle-div">
          <div class="middle-div_left"><img src="/shopManage/img/kele.jpg" alt=""></div>
          <div class="middle-div_right">
            <a href="">可口可乐</a>
            <p class="p2">￥ 2.99</p>
            <p class="p3">库存：20</p>
            <button class="middle-div_left_money" data-name="可口可乐" data-price="2.99" data-image="/shopManage/img/kele.jpg">购 买</button>
          </div>
        </div>
        <div class="middle-div">
          <div class="middle-div_left"><img src="./imgs/雪碧.jpg" alt=""></div>
        <div class="middle-div_right">
          <a href="">雪碧</a>
          <p class="p2">￥ 2.99</p>
          <p class="p3">库存：20</p>
          <button class="middle-div_left_money" data-name="雪碧" data-price="2.99" data-image="./imgs/雪碧.jpg">购 买</button>
        </div>
        </div>
        <div class="middle-div">
          <div class="middle-div_left"><img src="./imgs/果汁泥.png" alt=""></div>
          <div class="middle-div_right">
            <a href="">果汁泥</a>
            <p class="p2">￥ 1.99</p>
            <p class="p3">库存：20</p>
            <button class="middle-div_left_money" data-name="果汁泥" data-price="1.99" data-image="./imgs/果汁泥.png">购 买</button>
          </div>
        </div>
      </div>

      <div class="middle_box" id="middle_box_3" style="display: none;">
        <div class="middle-div">
          <div class="middle-div_left"><img src="./imgs/纸巾.jpg" alt=""></div>
          <div class="middle-div_right">
            <a href="">纸巾</a>
            <p class="p2">￥ 1.50</p>
            <p class="p3">库存：20</p>
            <button class="middle-div_left_money" data-name="纸巾" data-price="1.50" data-image="./imgs/纸巾.jpg">购 买</button>
          </div>
      </div>
      <div class="middle-div">
        <div class="middle-div_left"><img src="./imgs/湿巾.jpg" alt=""></div>
        <div class="middle-div_right">
          <a href="">湿巾</a>
          <p class="p2">￥ 5.00</p>
          <p class="p3">库存：20</p>
          <button class="middle-div_left_money" data-name="湿巾" data-price="5.00" data-image="./imgs/湿巾.jpg">购 买</button>
        </div>
      </div>
      </div>
    </div>


    <div class="bottom">
      <div class="bottom_left">
        <h3>订单详情</h3>
        <div id="order-details">

        </div>

      </div>

      <div class="bottom_right">
        <p>总价: ￥<span id="total-price">0</span></p>
        <button>结 算</button>
      </div>
    </div>

    </div>
    <!-- 弹窗 -->
    <div id="tanchuang">
      <!-- 关闭按钮 -->
      <button id="close" style="float: right;">关闭</button>
      <!-- 弹窗内容 -->
      <div id="tanchuangneirong">
          <p>商品上架</p>
          <div class="box2">
              <h2>商品添加</h2>
              <div class="dad">
                  <div><p>商品名称</p><input type="text" placeholder="请输入商品名称"></div>
                  <div><p>商品数量</p><input type="text" placeholder="请输入商品数量"></div>
                  <div><p>商品单价</p><input type="text" placeholder="请输入商品单价"></div>
                  <div><p>商品类别</p>
                  <select style="margin-left:-78px ;height: 25px;border-radius: 5px;font-size: 13px;">
                      <option readonly>请选择</option>
                        <option value="">零食</option>
                        <option value="">饮料</option>
                        <option value="">用品</option>
                  </select></div>
                  <div><p>商品图片</p><input type="file"></div>
              </div>
              <button class="tj"><span class="bot_span">添加</span> </button>
              <span></span>
          </div>
      </div>
    </div>

    <!-- 遮罩层 -->
    <div class="overlay" id="overlay"></div>

  </div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
//切换商品
  $(document).ready(function(){
    // 初始显示第一个选项的内容
    $("#middle_box_1").show();

    // 点击事件委托给父级元素
    $(".daohangtiao").on("click", ".dao_2", function(){
        // 获取目标内容块的ID
        var targetId = $(this).data("target");

        // 隐藏所有内容块
        $(".middle > div").hide();

        // 显示对应的目标内容块
        $("#" + targetId).show();
    });
});

$(document).ready(function(){
  // 点击菜品事件
  $('.middle-div_left_money').click(function(){
    var name = $(this).data('name'); // 获取菜品名称
    var price = $(this).data('price'); // 获取菜品价格
    var image = $(this).data('image'); // 获取菜品图片
    
    var existingItem = $('#order-details').find('[data-name="' + name + '"]'); // 查找是否已存在该菜品
    if(existingItem.length){
      var quantity = parseInt(existingItem.find('.quantity span').text()); // 获取已点菜品数量
      quantity++;
      existingItem.find('.quantity span').text(quantity); // 更新数量
      existingItem.find('.total-price').text('￥' + (quantity * price)); // 更新小计价格
    } else {
      var itemHtml = `
        <div class="order-item" data-name="${name}" data-price="${price}">
          <img src="${image}" alt="${name}">
          <div class="bot_name" title="${name} - ￥${price}">${name} - ￥${price}</div>
          <div class="quantity">
            <button class="decrease">-</button>
            <span>1</span>
            <button class="increase">+</button>
          </div>
          <button class="remove">取消</button>
        </div>
      `;
      $('#order-details').append(itemHtml); // 添加菜品到订单详情
    }
    
    updateTotalPrice(); // 更新总价
  });

  // 减少菜品数量
  $('#order-details').on('click', '.decrease', function(){
    var quantityElement = $(this).siblings('span');
    var quantity = parseInt(quantityElement.text());
    if(quantity > 1){
      quantity--;
      quantityElement.text(quantity);
      var price = parseFloat($(this).closest('.order-item').data('price'));
      $(this).closest('.order-item').find('.total-price').text('￥' + (quantity * price));
      updateTotalPrice(); // 更新总价
    }
  });

  // 增加菜品数量
  $('#order-details').on('click', '.increase', function(){
    var quantityElement = $(this).siblings('span');
    var quantity = parseInt(quantityElement.text());
    quantity++;
    quantityElement.text(quantity);
    var price = parseFloat($(this).closest('.order-item').data('price'));
    $(this).closest('.order-item').find('.total-price').text('￥' + (quantity * price));
    updateTotalPrice(); // 更新总价
  });

  // 取消订单项
  $('#order-details').on('click', '.remove', function(){
    $(this).closest('.order-item').remove(); // 移除订单项
    updateTotalPrice(); // 更新总价
  });

  // 更新总价
  function updateTotalPrice(){
    var totalPrice = 0;
    $('.order-item').each(function(){
      var quantity = parseInt($(this).find('.quantity span').text());
      var price = parseFloat($(this).data('price'));
      totalPrice += quantity * price;
    });
    $('#total-price').text(totalPrice.toFixed(2)); // 显示总价
  }
});

$(document).ready(function(){
    // 点击div图标
    $(".dao_3").click(function(){
        // 加载另一个HTML页面的内容
        $("#tanchuangneirong").load("另一个页面.html");
        // 淡入弹窗
        $("#tanchuang").fadeIn();

        // 显示遮罩层和弹窗
        overlay.style.display = "block";
        modal.style.display = "block";
        // 禁用除弹窗外的界面
        document.body.style.pointerEvents = "none";
    });

    // 关闭弹窗的点击事件
    $("#close").click(function(){
        // 淡出弹窗
        $("#tanchuang").fadeOut();

    // 清除输入框中的数据
    $("input[type='text']").val("");

    // 隐藏遮罩层和弹窗
    overlay.style.display = "none";
    modal.style.display = "none";
    // 启用界面操作
    document.body.style.pointerEvents = "auto";
    });
});

//   window.onload = function() {   
//     const middle = document.querySelector('.middle');
//     const dataArray = ['泡椒鸡爪', '绝味鸭脖', '双汇火腿肠', '麻辣鸡翅','淀粉肠']; 
  
//     dataArray.forEach(function(item) {  
//         const div = document.createElement('div');  
//         div.className = 'middle-div';
//         div.textContent = item;
//         middle.appendChild(div);  
//     });  
// };
</script>